<template>
  <div>
    <el-upload
        class='avatar-uploader'
        :action='serverUrl'
        name='file'
        :headers='header'
        :show-file-list='false'
        :on-success='uploadSuccess'
        :on-error='uploadError'
        :before-upload='beforeUpload'>
    </el-upload>
    <div class="quillClassDiv">
        <QuillEditor
        class="quillClass"
        v-model:content="content"
        ref="myQuillEditor" 
        @blur='onEditorBlur($event)' 
        @focus='onEditorFocus($event)'
        @text-change='onEditorChange($event)'
        :options="editorOption">
        </QuillEditor>
    </div>
  </div>
</template>
<script>
// 需要引入的文件
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { watch} from 'vue'
// 工具栏配置
const toolbar = [
    ['bold', 'italic', 'underline', 'strike',],        // toggled buttons
    [{ 'direction': 'rtl' },{'color':[]},{'background':[]},{'font':[]},{'align':[]}],
    ['blockquote', 'code-block','formula','image','video'],
    [{ 'header': 1 }, { 'header': 2 }],
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],
    [{ 'indent': '-1'}, { 'indent': '+1' }],
]
const handlers = {//重写image上传方法
  image: function image() {
    document.getElementsByClassName('el-upload__input')[0].click()
  }
};
const _this = this
export default {
  components: {
    QuillEditor
  },
  props:{
    modelValue:{},//v-model绑定
    serverUrl:{//上传时的服务器地址
      type:String,
    },
    header: { // 有的图片服务器要求请求头需要有token
      type:Object,
      default:(()=>{
        return {}
      })
      // token: sessionStorage.token
    }
  },
  data () {
    return {
      content: this.modelValue,
      quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
      editorOption:{
          modules:{
            toolbar:{
              container: toolbar,
              handlers: this.serverUrl?handlers:{} 
            },
          },
          placeholder: '请填写消息',
      },
    }
  },
  mounted(){
    if(this.content){ //初始化默认值
      this.$refs.myQuillEditor.setText(this.content)
    }
  },
  methods: {
    onEditorBlur () {
      // 失去焦点事件
    },
    onEditorFocus () {
      // 获得焦点事件
    },
    onEditorChange () {
      // 内容改变事件
      this.$emit('update:modelValue', this.$refs.myQuillEditor.getHTML())
    },
    // 富文本图片上传前
    beforeUpload () {
      // 显示loading动画
      this.quillUpdateImg = true
    },
    uploadSuccess (res, file) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.getQuill()
      // 如果上传成功
      if (res.code === 0) {
        this.$message.success('图片上传成功')
        // 获取光标位置
        let index = quill.selection.savedRange.index
        //插入图片
        quill.editor.insertEmbed(index, "image", res.data);
        quill.setSelection(index+1)
      } else {
        this.$message.warning('图片插入失败')
      }
      // loading动画消失
      this.quillUpdateImg = false
    },
    // 富文本图片上传失败
    uploadError () {
      // loading动画消失
      this.quillUpdateImg = false
      this.$message.warning('图片插入失败')
    },
    clearText(){//清空数据
      this.$refs.myQuillEditor.setText('')
    }
  }
}
</script>
<!-- 富文本样式，需要加哦，不然有问题 -->
<style>
.quillClassDiv{
  width: 100%;
  height: 500px;
}
.avatar-uploader{
  height: 0px;
}
.ql-container{
  height: calc(100% - 42px);
}
.editor {
  line-height: normal !important;
  height: 300px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: '保存';
  padding-right: 0px;
}

.ql-snow .ql-tooltip[data-mode=video]::before {
  content: '请输入视频地址:';
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: '32px';
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
  content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
  content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
  content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
  content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
  content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
  content: '标题6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: '等宽字体';
}
</style>